<template>
    <div name='code-editor'>
                <body>
        <Header></Header>
        <section>
            <div class="mainwrapper">
                <!-- 侧边栏 -->
                <Sidebar></Sidebar>
                <!-- /侧边栏 -->
                <div class="mainpanel">
                    <div class="contentpanel">
                        <div class="row row-stat">
<div class="contentpanel">
                        This template uses <a href="http://codemirror.net/" target="_blank">CodeMirror</a> as code editor to be used in this template. To know more about CodeMirror, click the buttons below
                        
                        <br><br>
                        
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h5 class="panel-title">XML/HTML Mode</h5>
                                <p>The XML mode supports two configuration parameters <code>htmlMode</code> and <code>alignCDATA</code>. To learn more visit <a target="_blank" href="http://codemirror.net/mode/xml/index.html">here</a>. To view more languages visit <a href="http://codemirror.net/mode/index.html" target="_blank">here</a></p>
                            </div><!-- panel-heading -->
                            <div class="panel-body nopadding">
                                <textarea id="code" name="code" style="display: none;">&lt;html style="color: green"&gt;
  &lt;!-- this is a comment --&gt;
  &lt;head&gt;
    &lt;title&gt;HTML Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
    I mean&amp;quot;&lt;/em&gt;... but might not match your style.
  &lt;/body&gt;
&lt;/html&gt;
</textarea>
<div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 33px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-hscrollbar" style="left: 29px;"><div style="height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="min-width: 20px; margin-left: 29px; min-height: 21px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1; display: none;"><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 0px; width: 1594px; height: 13px;"></div><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 26px; width: 0px; height: 13px;"></div><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 13px; width: 1594px; height: 13px;"></div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">1</div></div><pre>&nbsp;</pre></div></div><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 13px; visibility: hidden;">&nbsp;</div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none; visibility: hidden;">&nbsp;</div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 21px;"></div><div class="CodeMirror-gutters" style="height: 300px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div></div></div>   
                            </div><!-- panel-body -->
                        </div><!-- panel -->
                        
                        <div class="panel panel-default panel-alt">
            <div class="panel-heading">
                <h4 class="panel-title">Code Editor Theme</h4>
                <p>The code editor comes with different themes such as below. You can view more theme demos from the CodeMirror site by going <a href="http://codemirror.net/demo/theme.html" target="_blank">here</a></p>
            </div><!-- panel-heading -->
            <div class="panel-body nopadding">
                <textarea id="code2" name="code" style="display: none;">function findSequence(goal) {
  function find(start, history) {
    if (start == goal)
      return history;
    else if (start &gt; goal)
      return null;
    else
      return find(start + 5, "(" + history + " + 5)") ||
             find(start * 3, "(" + history + " * 3)");
  }
  return find(1, "1");
}
</textarea><div class="CodeMirror cm-s-ambiance"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6px; left: 35px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-hscrollbar" style="left: 31px;"><div style="height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="min-width: 15px; margin-left: 31px; min-height: 26px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1; display: none;"><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 2px; width: 1592px; height: 13px;"></div><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 218px; width: 0px; height: 13px;"></div><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 15px; width: 1592px; height: 203px;"></div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -31px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">1</div></div><pre>&nbsp;</pre></div></div><div class="CodeMirror-cursor" style="left: 4px; top: 2px; height: 13px;">&nbsp;</div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none;">&nbsp;</div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 26px;"></div><div class="CodeMirror-gutters" style="height: 300px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 30px;"></div></div></div></div>    
            </div><!-- panel-body -->
        </div><!-- panel -->
        
        <div class="panel panel-default panel-alt">
            <div class="panel-heading">
                <h4 class="panel-title">AutoFormatting Of Code</h4>
                <p>Select a piece of code and click one of the links below to apply automatic formatting to the selected text or comment/uncomment the selected text. Note that the formatting behavior depends on the current block's mode. </p>
                <div class="mb15"></div>
                <button class="btn btn-primary btn-sm mr5 autoformat">Autoformat Selected</button>
                <button class="btn btn-primary btn-sm mr5 comment">Comment Selected</button>
                <button class="btn btn-primary btn-sm uncomment">Uncommment Selected</button>
            </div><!-- panel-heading -->
            <div class="panel-body nopadding">
                <textarea id="code3" name="code" style="display: none;">&lt;script&gt; function (s,e){ for(var i=0; i &lt; 1; i++) test("test();a=1");} &lt;/script&gt;
&lt;script&gt;
function test(c){  for (var i = 0; i &lt; 10; i++){	          process("a.b();c = null;", 300);}
}
&lt;/script&gt;
&lt;table&gt;&lt;tr&gt;&lt;td&gt;test 1&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;test 2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;script&gt; function test() { return 1;} &lt;/script&gt;
&lt;style&gt; .test { font-size: medium; font-family: monospace; }
&lt;/style&gt;</textarea><div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 33px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-hscrollbar" style="left: 29px;"><div style="height: 1px; width: 0px;"></div></div><div class="CodeMirror-vscrollbar"><div style="width: 1px; height: 0px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1" draggable="false"><div class="CodeMirror-sizer" style="min-width: 20px; margin-left: 29px; min-height: 21px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1; display: none;"><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 0px; width: 1594px; height: 13px;"></div><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 104px; width: 56px; height: 13px;"></div><div class="CodeMirror-selected" style="position: absolute; left: 4px; top: 13px; width: 1594px; height: 91px;"></div></div><div class="CodeMirror-code" style=""><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="position: absolute; left: -29px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 20px;">1</div></div><pre>&nbsp;</pre></div></div><div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 13px; visibility: hidden;">&nbsp;</div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="display: none; visibility: hidden;">&nbsp;</div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; top: 21px;"></div><div class="CodeMirror-gutters" style="height: 300px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 28px;"></div></div></div></div>    
            </div><!-- panel-body -->
        </div><!-- panel -->
                    </div>
                        </div><!-- row -->
                    </div>
                    <!-- contentpanel -->
                </div>
                <!-- mainpanel -->
            </div>
            <!-- mainwrapper -->
        </section>

    </body>


</div>
 
</template>
<script>
export default {
    name:'code-editor'
}
</script>
